<!-- 司机 添加/编辑/查看 组件 -->
<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <el-row v-if="!readonly" style="margin-bottom: 15px; color: red;">
        <a><i class="el-icon-warning-outline"></i> 请如实填写，注意 <i style="color: black;" class="el-icon-question"></i> 中的内容，应填尽填。填写不规范将影响省平台的接入!</a>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" prop="driverName">
            <el-input v-model="form.driverName" placeholder="请输入姓名" :readonly="readonly" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="drivingLicense">
            <el-input v-model="form.drivingLicense" placeholder="请输入身份证号" maxlength="18" show-word-limit @blur="blurHandle" :readonly="readonly" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机号" prop="telephone">
            <el-input v-model="form.telephone" placeholder="请输入手机号" maxlength="11" show-word-limit :readonly="readonly" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="从业资格证号" prop="qualificationCertificate">
            <span slot="label">
              从业资格证号
              <el-tooltip effect="dark" placement="top" content="使用总质量4.5吨及以下普通货运车辆从事普通货物运输经营的驾驶员，填写“驾驶员身份证前6位+000000000000”">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-input v-model="form.qualificationCertificate" placeholder="请输入从业资格证号" :readonly="readonly" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="准驾车型" prop="vehicleClass">
            <span slot="label">
              准驾车型
              <el-tooltip effect="dark" placement="top" content="使用总质量4.5吨及以下普通货运车辆从事普通货物运输经营的驾驶员必填">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-input v-model="form.vehicleClass" placeholder="请输入准驾车型" :readonly="readonly" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="驾驶证发证机关" prop="issuingOrganizations">
            <span slot="label">
              驾驶证发证机关
              <el-tooltip effect="dark" placement="top" content="使用总质量4.5吨及以下普通货运车辆从事普通货物运输经营的驾驶员必填">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-input v-model="form.issuingOrganizations" placeholder="请输入驾驶证发证机关" :readonly="readonly" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="驾驶证有效期自" prop="validPeriodFrom">
            <span slot="label">
              驾驶证有效期自
              <el-tooltip effect="dark" placement="top" content="使用总质量4.5吨及以下普通货运车辆从事普通货物运输经营的驾驶员必填">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-date-picker clearable :disabled="readonly"
              style="width: 100%;"
              v-model="form.validPeriodFrom"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择驾驶证有效期自">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="驾驶证有效期至" prop="validPeriodTo">
            <span slot="label">
              驾驶证有效期至
              <el-tooltip effect="dark" placement="top" content="使用总质量4.5吨及以下普通货运车辆从事普通货物运输经营的驾驶员必填(如果为长期填2999-12-31)">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-date-picker clearable :disabled="readonly"
              style="width: 100%;"
              v-model="form.validPeriodTo"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择驾驶证有效期至">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" placeholder="请选择性别" style="width: 100%;" :disabled="readonly">
              <el-option
                v-for="item in sexOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="state">
            <el-switch disabled
              v-model="form.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="2"
              active-text="正常"
              inactive-text="禁用">
            </el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="身份证人像面">
            <el-image class="image-slot" :src="form.idCardImg1" fit="fit" :preview-src-list="srcList" @click="preview(form.idCardImg1)">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证国徽面">
            <el-image class="image-slot" :src="form.idCardImg2" fit="fit" :preview-src-list="srcList" @click="preview(form.idCardImg2)">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="驾驶证照片">
            <el-image class="image-slot" :src="form.driverCardImg" fit="fit" :preview-src-list="srcList" @click="preview(form.driverCardImg)">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资格证照片">
            <el-image class="image-slot" :src="form.qcImg" fit="fit" :preview-src-list="srcList" @click="preview(form.qcImg)">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footerr">
      <el-button v-if="!readonly" type="primary" :disabled="disabled" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">{{ readonly ? '关 闭' : '取 消' }}</el-button>
    </div>
  </div>
</template>

<script>
import { getDriver, addDriver, updateDriver } from "@/api/tws/driver";
import { getShortCode } from "@/api/tws/utils";

export default {
  name: 'DriverForm',
  components: {
  },
  props: {
    // 模式：1新增 2修改 3查看
    mode: {
      type: String,
      default: '3'
    },
    driverId: {
      type: String
    }
  },
  data() {
    return {
      readonly: true,
      disabled: false,
      // 性别字典
      sexOptions: [],
      // 图片预览
      srcList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        driverName: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        drivingLicense: [
          { required: true, message: "身份证号不能为空", trigger: "blur" },
          {
            pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
            message: '请输入正确的证件号',
            trigger: 'blur'
          }
        ],
        telephone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        qualificationCertificate: [
          { required: true, message: "从业资格证号不能为空", trigger: "blur" }
        ]
      }
    };
  },
  watch: {
    mode: function(newData, oldData) {
      if(newData) {
        if(newData == '1' || newData == '2') {
          this.readonly = false;
        } else {
          this.readonly = true;
        }
      }
    },
    driverId: function(newData, oldData) {
      this.reset();
      this.srcList = [];
      if(newData) {
        getDriver(newData).then(response => {
          this.form = response.data;
          // 默认填充一张图片
          if(this.form.idCardImg1) {
            this.srcList.push(this.form.idCardImg1);
          }
        });
      }
    }
  },
  created() {
    this.getDict();
  },
  methods: {
    /** 查询字典 */
    getDict() {
      // 性别字典
      this.getDicts("sys_user_sex").then(response => {
        this.sexOptions = response.data;
      });
    },
    // 求助记码
    getCode() {
      if(this.form.driverName != undefined && this.form.driverName != ""){
        getShortCode(this.form.driverName).then(res => {
          this.form.code = res.msg;
        });
      }
    },
    // 图片预览
    preview(url) {
      this.srcList = [];
      if(url) {
        this.srcList.push(url)
      }
    },
    // 输入身份证号后计算性别和年龄
    blurHandle() {
      if(this.form.drivingLicense && this.form.drivingLicense.length == 18) {
        // 性别 0男 1女
        this.form.sex = parseInt(this.form.drivingLicense.substr(16,1)) % 2 == 1 ? '0' : '1'
        // 年龄
        // var yearBirth = this.form.drivingLicense.substring(6, 10);
        // var monthBirth = this.form.drivingLicense.substring(10, 12);
        // var dayBirth = this.form.drivingLicense.substring(12, 14);
        // var nowDate = new Date();
        // var monthNow = nowDate.getMonth() + 1;
        // var dayNow = nowDate.getDate();
        // var age = nowDate.getFullYear() - yearBirth;
        // if(monthNow < monthBirth || monthNow == monthBirth && dayNow < dayBirth) {
        //   age--;
        // }
        // if(age < 0) {
        //   age = 0;
        // }
        // this.form.age = age;
      }
    },
    // 取消按钮
    cancel() {
      this.huidiao();
    },
    huidiao() {
      this.reset();
      this.$emit("close");
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        driverName: null,
        drivingLicense: null,
        telephone: null,
        qualificationCertificate: null,
        vehicleClass: null,
        issuingOrganizations: null,
        validPeriodFrom: null,
        validPeriodTo: null,
        code: null,
        sex: null,
        age: null,
        isCert: '0',
        state: '1',
        idCardImg1: null,
        idCardImg2: null,
        driverCardImg: null,
        qcImg: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.disabled = true;
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            if(this.form.isCert != this.$store.state.constants.isCert_yrz) {
              this.form.isCert = this.$store.state.constants.isCert_shz;
            }
            updateDriver(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.disabled = false;
              this.huidiao();
            }).catch(err => {
              this.disabled = false;
            })
          } else {
            this.form.isCert = this.$store.state.constants.isCert_shz;
            addDriver(this.form).then(response => {
              this.$modal.msgSuccess("提交成功，请等待审核");
              this.disabled = false;
              this.huidiao();
            }).catch(err => {
              this.disabled = false;
            })
          }
        } else {
          this.disabled = false;
        }
      });
    }
  }
};
</script>

<style>
  .select {
    width: 100%;
  }
  .dialog-footerr {
    text-align: center;
  }
  .image-slot {
    width: 160px;
    height: 160px;
    background: #F5F7FA;
  }
  .el-icon-picture-outline {
    display: block;
    text-align: center;
    line-height: 160px;
  }
</style>
